<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../../layui/src/css/layui.css" media="all">
    <script type="text/javascript" src="../../../layui/src/layui.all.js"></script>
</head>
<body>

<table id="test" lay-filter="test"></table>
<div id="page"></div>
<button id="show">展开</button>
<button id="hide">折叠</button>
<button id="reload">重载</button>
<button id="showSn">展示run数据</button>
<button id="getData">获取data数据</button>

<script type="text/javascript">
    layui.config({
        base: '../../../layui_exts/tableTreeDj/'
    });
    layui.use(['table','tableTreeDj'], function() {
        const table = layui.table
        const tableTree = layui.tableTreeDj;
        const $ = layui.$;

        // 分页配置
        const page = {
            elem: 'page'
            , layout: ['prev', 'page', 'next', 'last','skip'] //自定义分页布局
            , groups: 5 //只显示 5 个连续页码
            , prev: '上一页'
            , next: '下一页'
            , first: 1 //不显示首页
        };

        // 字段配置
        /*
        const cols = [[
            {field: 'aid', title: 'id',style:'color: black;',},
            {field: 'title', title: '名称',style:'color: black;'},
            {field: 'parent_id', title: '上级id',style:'color: black;'},
        ]];
         */
        const cols = [[
            { field: 'id', title: '菜单编码', width: 100, align: "center" }
            , { field: 'title', title: '菜单名称' }
            , { field: 'listorder', title: '排序(大到小)', width: 130, align: "center" }
            , {
                field: 'type', title: '菜单类型', templet: function (d) {
                    switch (d.type) {
                        case "目录":
                            return '<span class="layui-badge layui-bg-green">' + d.type + '</span>';
                            break;
                        case "路径":
                            return '<span class="layui-badge layui-orange">' + d.type + '</span>';
                            break;
                        default:
                            return '<span class="layui-badge layui-bg-blue">' + d.type + '</span>'
                    }
                }, width: 130, align: "center"
            }
            , {
                field: 'status', title: '菜单状态', templet: function (d) {
                    switch (d.status) {
                        case "正常":
                            return '<span class="layui-badge layui-bg-green">' + d.status + '</span>';
                            break;
                        case "禁用":
                            return '<span class="layui-badge">隐藏</span>';
                            break;
                        default:
                            return '<span class="layui-badge layui-bg-gray">' + d.status + '</span>'
                    }
                }, width: 130, align: "center"
            }
            , { title: '操作', align: 'center', toolbar: '#table-useradmin-admin' }
        ]]



        // 表格配置
        const objTable = {
            elem: '#test'
            //,url: 'http://www.dj.cn/'
            //,url: './getData0.json'
            ,url: './getData.json'
            ,page:page
            ,limit: 2
            ,cols: cols
            ,id: 'list'
            ,loading:true
        }

        const objTree = {
            //defaultShow: true,
            title: 'title',
            keyId: "id",
            keyPid: "fid",
            indent: '&nbsp;&nbsp;&nbsp;&nbsp;',
            icon: {
                open: 'layui-icon layui-icon-triangle-d', // 展开时候图标
                close: 'layui-icon layui-icon-triangle-r', // 折叠时候图标
            }
            ,showCache: true, //是否开启展开折叠缓存,默认不开启
        }

        // tableTree 渲染表格
        //table.render(objTable)
        tableTree.render(objTable, objTree);

        tableTree.cache(tableTree.getShowCache(), [])

        $('#show').click(() => {
            tableTree.showAll(objTable);
        });
        $('#hide').click(() => {
            tableTree.hideAll(objTable);
        });

        $('#showSn').click(() => {
            const run = tableTree.getRun();
            const dataIndex = run.dataIndex;
            for(let id in dataIndex) {
                let has = true;
                let sn = id;
                let idNow = id;

                while(has) {
                    if(!!run.childParent[idNow]) {
                        let pid = run.childParent[idNow];
                        sn = pid + " - " + sn;
                        idNow = pid
                    } else {
                        break;
                    }
                }
                $("[lay-id='"+ objTable.id +"'] table tr[data-index='"+ dataIndex[id] +"'] td[data-field="+ "sn" +"]").children("div").html(sn);
            }
        });

        $('#getData').click(() => {
            const data = tableTree.getDataOri();
            console.log(data);

        });


        $('#reload').click(() => {
            objTable.where = {key:"val"}
            tableTree.reload(objTable, 'list');
        });

    });
</script>

</body>
</html>